<template>
  <el-row class="container">
    <el-col :span="12">
      <div type="card">
        <el-menu type="card" class="nav">
          <el-sub-menu index="1">
            <template #title>
              <span>购票服务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="step = 0">销售网点</el-menu-item>
              <el-menu-item index="1-2" @click="step = 1">机场柜台服务</el-menu-item>
              <el-menu-item index="1-3" @click="step = 2">自助退票</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <span>出行准备</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="step = 3">特殊旅客服务</el-menu-item>
              <el-menu-item index="2-2" @click="step = 4">防范诈骗温馨提醒</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <span>地面服务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">办理乘机手续</el-menu-item>
              <el-menu-item index="3-2">航班不正常服务</el-menu-item>
              <el-menu-item index="3-3">延误行李查询</el-menu-item>
              <el-menu-item index="3-4">遗留物品领取须知</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <span>客舱服务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">温馨服务</el-menu-item>
              <el-menu-item index="4-2">座位布局图</el-menu-item>
              <el-menu-item index="4-3">客舱特色服务</el-menu-item>
              <el-menu-item index="4-4">机上延误处置预案</el-menu-item>
              <el-menu-item index="4-5">在线选座须知</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <span>运输规定</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1">航班超售处置规定</el-menu-item>
              <el-menu-item index="5-2">国内团队退改规定</el-menu-item>
              <el-menu-item index="5-3">责任声明</el-menu-item>
              <el-menu-item index="5-4">设备权限清单</el-menu-item>
              <el-menu-item index="5-5">第三方SDK收集使用信息说明</el-menu-item>
              <el-menu-item index="5-6">儿童隐私通知</el-menu-item>
              <el-menu-item index="5-7">Cookie 声明</el-menu-item>
              <el-menu-item index="5-8">旅客个人信息出境告知书</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="main" type="card">
        <el-card class="card" v-if="step === 0">
          <el-header class="card-header">销售网点</el-header>
          <el-divider class="card-divider"></el-divider>
          <el-main class="card-main">
            <p style="margin-top:5px;margin-right:0;margin-bottom:5px;margin-left:0;text-indent:0;padding:0 0 0 0 ;line-height:21px;background:rgb(255,255,255)"><strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">24小时购票热线：</span></strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">&nbsp;95557（全国统一号码）&nbsp;</span></p>
            <p style="margin-top:5px;margin-right:0;margin-bottom:5px;margin-left:0;text-indent:0;padding:0 0 0 0 ;line-height:21px;background:rgb(255,255,255)"><strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">境外请拨：</span></strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">&nbsp;86- 592-2226666</span></p>
            <p style="margin-top:5px;margin-right:0;margin-bottom:5px;margin-left:0;text-indent:0;padding:0 0 0 0 ;line-height:21px;background:rgb(255,255,255)"><strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">阿姆斯特丹服务电话：</span></strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">&nbsp;+31 8000 205888</span></p>
            <p style="margin-top:5px;margin-right:0;margin-bottom:5px;margin-left:0;text-indent:0;padding:0 0 0 0 ;line-height:21px;background:rgb(255,255,255)"><strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">澳洲服务电话：</span></strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">&nbsp;1800995557</span></p>
            <p style="margin-top:5px;margin-right:0;margin-bottom:5px;margin-left:0;text-indent:0;padding:0 0 0 0 ;line-height:21px;background:rgb(255,255,255)"><strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px"><span style="font-family:微软雅黑">加拿大服务电话：</span><span style="font-family:微软雅黑">&nbsp;</span></span></strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">001-8557895557</span></p>
            <p style="margin-top:5px;margin-right:0;margin-bottom:5px;margin-left:0;text-indent:0;padding:0 0 0 0 ;line-height:21px;background:rgb(255,255,255)"><strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">新加坡服务电话：</span></strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">&nbsp;0065-63297566</span></p>
            <p style="margin-top:5px;margin-right:0;margin-bottom:5px;margin-left:0;text-indent:0;padding:0 0 0 0 ;line-height:21px;background:rgb(255,255,255)"><strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">美国服务电话：</span></strong><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px">&nbsp;001-8557895557</span></p>
            <p style="margin: 5px 0px; text-indent: 0px; padding: 0px; line-height: 21px; background: rgb(255, 255, 255);"><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px"><br></span></p>
            <p style="margin: 5px 0px; text-indent: 0px; padding: 0px; line-height: 21px; background: rgb(255, 255, 255);"><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px"><br></span></p>
            <p style="margin: 5px 0px; text-indent: 0px; padding: 0px; line-height: 21px; background: rgb(255, 255, 255); width: 100%;"><span style="font-family: 微软雅黑;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 14px"><strong>所在地若无厦航直销机构或保障能力不足的周边城市直销机构，按行政隶属关系可联系所在地省会城市直销机构处理。</strong></span></p>
          </el-main>
        </el-card>
        <el-card class="card" v-if="step === 1">
          <div class="ticketManagement">
            <div class="history">
              <div class="historyNav">
                <span class="sub">
                  机场柜台服务
                </span>
              </div>
              <div class="historySearch">
                <p style="text-indent: 25px;width: 100%;padding-left: 0;"><strong>
                  欢迎您使用厦航在以下城市的机场柜台服务，受理出票、客票改期、升舱等业务。部分机场厦航柜台推出“行前机场取票”服务，详请咨询当地机场柜台。
                </strong>
                </p>
              </div>
            </div>
            <div class="explainTable">

              <p>机场行前取票——厦航对居住偏远、出差在外、公务繁忙的旅客推出“行前机场取票”服务，只要您拨打：厦航购票服务热线95557 或厦航驻当地任一直销售票处电话订购7折以上机票，国内航班起飞前60分钟、国际航班起飞前120分钟抵达机场的厦航柜台，凭售票员给您的 6 位电脑订座记录及有效身份证件即可办理交款、取票手续。</p>

              <div class="con"><div class="cen"><p style="line-height: 2em;">温馨提醒：</p><p style="text-indent: 2em; line-height: 2em;">1、每年法定春运、国庆、五一及暑运期间（每年6、7、8、9月份）航班，以及航班远期销售期间（距离航班起飞5日〔含〕前），不接受旅客“行前取票”订座。</p><p style="text-indent: 2em; line-height: 2em;">2、厦航各地销售网点及机场柜台：<a href="https://www.xiamenair.com/brandnew_CN/passenger-service/sales-outlets.html" target="_self">点此查询</a> 。</p></div></div>

            </div>
          </div>
        </el-card>
        <el-card class="card" v-if="step === 2">
            <div>
              <h3>温馨提示：</h3>
              <p>当您购买的厦航承运客票需要退票时，您可通过该渠道办理退票：</p>
              <p>1）仅限购买厦航承运国内航班的电子客票（731开头）；</p>
              <p>2）已办理乘机手续的旅客需要先行取消值机；</p>
              <p>3）退票款将退至乘机旅客本人所绑定的银行卡内。</p>
              <p>4）当您的航班发生延误或者取消并符合免费退票条件时，您可免手续费办理退票</p>
              <p>以下情况暂不支持：</p>
              <p>1）非厦航承运代码共享航班和互售外航承运航班客票；</p>
              <p>2）客票属于以下类型：团队客票、大客户客票、公务票、套票、儿童票、婴儿票、含儿童或婴儿票的成人客票；</p>
              <p>3）机票中含有酒店产品或附加服务产品的客票；</p>
              <p>4）舱位代码为A/O/E/X/G的特殊舱位客票；</p>
              <p>5）已变更换开新票的客票、超过有效期的客票。</p>
              <p>操作过程中如遇到任何问题，您可联系原出票地或厦航客服热线95557。</p>
            </div>
        </el-card>
        <el-card class="card" v-if="step === 3">
          <div class="right">
            <div class="rightTxt">特殊旅客服务</div>
            <p style="line-height: 2em; text-indent: 0em;"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">出行提示</span></strong></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">各类自助值机业务（含官网/手机APP/微信公众号自助办理值机、现场自助值机设备）暂不受理特殊旅客及加验其它值机证明方可运输的旅客（包括但不限于重要VIP旅客、病患旅客、残障旅客、伤残军人警察、孕妇、婴儿、无成人陪伴儿童/青少年旅客、申请婴儿摇篮的旅客、携带人体捐献器官运输的OPO工作人员、犯罪嫌疑人或犯人及其押解人员等），请您持购票时提供的有效身份证件及其他必需证明直接到机场厦航值机柜台办理。</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">&nbsp;</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">航班不正常情况</span></strong></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">厦航将尽力按照旅行之日起生效的航班时刻表运输旅客与行李。但如您乘坐的航班发生了非自愿的航班计划性调整（旅行之日的临时性调整除外），我们将无法保障您申请的特殊服务，请您谅解。</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">&nbsp;</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">限制运输</span></strong></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">婴儿、孕妇、申请婴儿摇篮的旅客、无成人陪伴儿童/青少年旅客、病患旅客、残障旅客、携带人体捐献器官运输的OPO工作人员、犯罪嫌疑人或犯人及其押解人员等由于其身体或精神状况在旅途中需要特殊照顾或在一定条件下才能运输的旅客，只有在符合厦航及相关承运人规定的条件下，经厦航及相关承运人预先同意并在必要时做出安排后方予载运。出于安全的考虑，厦航对每一航班限制运输（服务）旅客的数量进行相应的控制，请您务必在定座和购买机票时提前申请。</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">&nbsp;</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">特殊服务申请范围</span></strong></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">厦航仅接受由厦航731票证开具的，由厦航实际承运的且为厦航航班号的航班中提供特殊服务申请。代码共享航班不接受特殊服务申请。</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">如您购买的联程或来回程机票涉及厦航以外的其他航空公司，或您的客票由其他公司开具的，请您与实际承运航空公司联系办理相关手续。</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">如您是残障旅客，厦航将尽力协助您申请联程航班特殊服务，但特殊服务申请结果以实际承运航空公司回复为准。</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">&nbsp;</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><strong><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">医疗证明</span></strong></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">1. 如果旅客存在以下情况，厦航有权要求旅客出示厦航认可医院出具的并有该名旅客的医生签名的医疗证明：</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">（1）旅客携带早产婴儿保育箱旅行的；</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">（2）在飞行中，需要使用医用氧气设备输氧的；</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">（3）乘坐飞机对其健康状况有威胁的，或在飞行中需要特别医疗护理的；</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">（4）已知患严重的传染性疾病，但如采取一定的预防措施可防止传染他人的。</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">2. 医疗证明由“二级（含二级）以上医院”、专科医院、境外诊所、医疗中心等出具的证明文件，应含有“经诊断，该旅客的健康条件在医学上能够适应航空旅行”或意思相近的描述，并经医生签字、医疗单位盖章（境外医疗机构如无法加盖公章，则必须有医生签字）。“医疗证明”应在航班计划起飞时间前72小时内开具的方为有效。对于“整容、整形术后恢复中的旅客”，“医疗证明”也可由门诊部开具。</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">3. 需提供旅客医用氧气的患病旅客还应持有由合格医生签署的书面证明，说明该员有使用该设备的医学需要，并具体标明，在正常飞行时与飞机客舱内压力相对应的压力高度下，每小时所需的最大氧气量和最大氧气流量。</span></p>
            <p style="line-height: 2em; text-indent: 0em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">4. 属于符合国家标准《残疾人残疾分类和分级》的永久或暂时性的身体、精神损伤的残疾人旅客在申请厦航特殊服务时可不提供适宜乘机的医疗证明。</span><span style="text-align: justify; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">(详情请点击查看：</span><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">残疾人残疾分类和分级</span><span style="text-align: justify; font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">)</span></p>
          </div>
        </el-card>
        <el-card class="card" v-if="step === 4">
          <div class="ticketManagement">
            <div class="history">
              <div class="historyNav">
                <span class="sub">
                  防范诈骗温馨提醒
                </span>
              </div>
              <div class="historySearch">
                <p style="text-indent: 25px;width: 100%;padding-left: 0;"><strong>
                </strong>
                </p>
              </div>
            </div>
            <div class="explainTable">
              <p style="line-height: 2em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">尊敬的旅客：</span></p><p style="text-indent: 2em; line-height: 2em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">航班变动及退改消息请以厦航官网、APP、小程序、微信公众号等官方渠道信息为准，非官方渠道信息请勿轻信。</span><br></p><p style="text-indent: 2em; line-height: 2em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">厦航官方客服电话：95557</span></p><p style="text-indent: 2em; line-height: 2em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">厦航境外客服热线：+86-592-2226666</span></p><p style="text-indent: 2em; line-height: 2em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">厦航国内官网：<a href="https://www.xiamenair.com" _src="https://www.xiamenair.com">www.xiamenair.com</a>&nbsp;</span></p><p style="text-indent: 2em; line-height: 2em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">官方小程序：厦门航空</span></p><p style="text-indent: 2em; line-height: 2em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">厦航APP：厦门航空</span></p><p style="text-indent: 2em; line-height: 2em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">厦航官方微信公众号：厦门航空</span></p><p style="text-indent: 2em; line-height: 2em;"><span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 14px;">厦航手机移动网站：m.xiamenair.com&nbsp;</span></p><p><br></p>
            </div>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "UserHelp",
  data() {
    return {
      step: "",
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f2fafd;
  height:100vh;
  width:208vh;
}
.nav {
  width: 200px;
  background-color: #ffffff;
  position: fixed;
  left: 330px;
  top:  120px;
}
.card {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 100px;
  position: relative;
  top: -40px;
  left: 550px;
  width: 700px;
}
.card-header {
  position: relative;
  top: -20px;
  left: -300px;
  font-size: 17px;
}
.card-divider {
  position: relative;
  top: -60px;
  left: -20px;
  font-size: 17px;
  width: 700px;
}
.card-main {
  position: relative;
  top: -70px;
  left: 0;
  font-size: 17px;
}
</style>